<template>
  <div>
    <Form :model="formItem" :label-width="120">
      <Tabs value="name0">
        <TabPane :label="$t('baseInfo')" name="name0">
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.region') + '：'">
                <span>中国-北京-顺义区-后沙峪XXX国际大厦</span>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem :label="$t('equipment.status') + '：'">
                <span>正常</span>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.deviceName') + '：'">
                <span>808脱毛</span>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem :label="$t('equipment.outStorageTime') + '：'">
                <span>2020-01-22 12：12：12</span>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.serialNumber') + 'ID：'">
                <span> 1234567800</span>
              </FormItem>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
      <Tabs value="name1">
        <TabPane :label="$t('equipment.operatorInfo')" name="name1">
          <Row>
            <Col span="24">
              <Table
                :loading="loading"
                border
                :columns="columns"
                :data="item.data"
                ref="table"
                sortable="custom"
              >
                <template slot-scope="{ row }" slot="status">
                  {{ row.status | status }}
                </template>
              </Table>
              <Row type="flex" justify="end" class="page">
                <Page
                  :current="pageNumber"
                  :total="total"
                  :page-size="pageSize"
                  @on-change="changePage"
                  @on-page-size-change="changePageSize"
                  :page-size-opts="[10, 20, 50]"
                  size="small"
                  show-total
                  show-elevator
                  show-sizer
                  style="margin-top: 15px"
                ></Page>
              </Row>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </Form>
     <Modal
        v-model="showModal"
        width="980"
        title="操作师用户详情"
        @on-ok="ok"
        @on-cancel="cancel">
        <operator-detail></operator-detail>
        <div slot="footer" style="width:300px;margin:20px auto;">
             <Button type="primary" @click="showModal = false" long>{{
          $t("onClose")
        }}</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import operatorDetail from "./operatorDetail"
export default {
    components:{
        operatorDetail
     
    },
  data() {
    return {
        showModal:false,
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      item: {
        data: [
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
          {
            id: "12345678",
            operator: "大阿哥",
            createTime: "2021-01-11",
            phone: "1771923844",
            status: "正常",
          },
        ],
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber"),
          key: "id",
          align: "center",
        },
        {
          title: this.$t("equipment.operator"),
          key: "operator",
          align: "center",
        },
        {
          title: this.$t("createTime"),
          key: "createTime",
          align: "center",
        },
        {
          title: this.$t("phone"),
          key: "phone",
          align: "center",
        },
        {
          title: this.$t("equipment.status"),
          key: "status",
          align: "center",
        },
        {
          title: this.$t("equipment.operate"),
          key: "action",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.onView(params.row);
                    },
                  },
                },
                this.$t("onView")
              ),
            ]);
          },
        },
      ],
    };
  },
  computed: {
    lang() {
      return this.$store.state.app.lang;
    },
  },
  watch: {
    lang(val) {
      this.columns = [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber"),
          key: "id",
          align: "center",
        },
        {
          title: this.$t("equipment.operator"),
          key: "operator",
          align: "center",
        },
        {
          title: this.$t("createTime"),
          key: "createTime",
          align: "center",
        },
        {
          title: this.$t("phone"),
          key: "phone",
          align: "center",
        },
        {
          title: this.$t("equipment.status"),
          key: "status",
          align: "center",
        },
        {
          title: this.$t("equipment.operate"),
          key: "action",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.onView(params.row);
                    },
                  },
                },
                this.$t("onView")
              ),
            ]);
          },
        },
      ];
    },
  },
  methods: {
    onView(item) {
        this.showModal = true
    },
  },
  changePage(v){
      this.pageNumber = v
  },
  changePageSize(v){
      this.pageSize = v
  }
};
</script>

<style>
</style>